
import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { X, Save } from "lucide-react";

export default function GlobalEventForm({ event, onSubmit, onCancel }) {
  const [localEvent, setLocalEvent] = useState({
    name: "",
    type: "peakPeriod",
    startDate: "",
    endDate: "",
    durationMultiplier: 1.0,
    description: "",
    isPermissiveWindow: false,  
    ...event
  });

  const handleFieldChange = (field, value) => {
    setLocalEvent(prev => ({ ...prev, [field]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(localEvent);
  };

  const eventTypes = [
    { value: "peakPeriod", label: "高峰期", description: "用电高峰期，影响施工工期" },
    { value: "powerOutageWindow", label: "停电窗口", description: "允许停电作业的时间窗口" },
    { value: "roadClosureWindow", label: "封路窗口", description: "允许封路作业的时间窗口" },
    { value: "navigationSuspensionWindow", label: "停航窗口", description: "允许江河停航作业的时间窗口" },
    { value: "transportSuspensionWindow", label: "停运窗口", description: "允许铁路等交通停运的时间窗口" },
    { value: "climateEvent", label: "气候事件", description: "气候相关的影响因素" },
    { value: "supplyGuarantee", label: "保供电", description: "重要保供电时期" },
    { value: "holiday", label: "节假日", description: "法定节假日或特殊假期" }
  ];

  return (
    <Card className="mb-6 shadow-lg border-blue-200">
      <CardHeader className="bg-blue-50">
        <CardTitle className="flex items-center justify-between">
          <span>{event ? '编辑全局事件' : '新建全局事件'}</span>
          <Button variant="ghost" size="icon" onClick={onCancel}>
            <X className="w-4 h-4" />
          </Button>
        </CardTitle>
      </CardHeader>

      <CardContent className="p-6">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="name">事件名称 *</Label>
              <Input
                id="name"
                value={localEvent.name}
                onChange={(e) => handleFieldChange("name", e.target.value)}
                placeholder="如：2025年迎峰度夏"
                required
              />
            </div>

            <div>
              <Label htmlFor="type">事件类型 *</Label>
              <Select
                value={localEvent.type}
                onValueChange={(value) => handleFieldChange("type", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="选择事件类型" />
                </SelectTrigger>
                <SelectContent>
                  {eventTypes.map(type => (
                    <SelectItem key={type.value} value={type.value}>
                      <div>
                        <div className="font-medium">{type.label}</div>
                        <div className="text-sm text-gray-500">{type.description}</div>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label htmlFor="startDate">开始日期 *</Label>
              <Input
                id="startDate"
                type="date"
                value={localEvent.startDate}
                onChange={(e) => handleFieldChange("startDate", e.target.value)}
                required
              />
            </div>

            <div>
              <Label htmlFor="endDate">结束日期 *</Label>
              <Input
                id="endDate"
                type="date"
                value={localEvent.endDate}
                onChange={(e) => handleFieldChange("endDate", e.target.value)}
                required
              />
            </div>

            <div>
              <Label htmlFor="durationMultiplier">工期影响倍数</Label>
              <Input
                id="durationMultiplier"
                type="number"
                step="0.1"
                min="0.1"
                max="10"
                value={localEvent.durationMultiplier}
                onChange={(e) => handleFieldChange("durationMultiplier", parseFloat(e.target.value) || 1.0)}
                placeholder="1.0表示无影响，1.5表示工期增加50%"
              />
              <p className="text-xs text-gray-500 mt-1">
                1.0 = 无影响，1.5 = 工期增加50%，0.8 = 工期缩短20%
              </p>
            </div>

            <div className="flex items-center space-x-2 pt-6"> {/* Added pt-6 here */}
              <Checkbox
                id="isPermissiveWindow"
                checked={localEvent.isPermissiveWindow}
                onCheckedChange={(checked) => handleFieldChange("isPermissiveWindow", checked)}
              />
              <Label htmlFor="isPermissiveWindow" className="text-sm font-medium">
                此时间窗口允许特殊作业
              </Label>
            </div>
          </div>

          <div>
            <Label htmlFor="description">事件描述</Label>
            <Textarea
              id="description"
              value={localEvent.description}
              onChange={(e) => handleFieldChange("description", e.target.value)}
              placeholder="详细描述此事件对施工的影响..."
              rows={3}
            />
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t">
            <Button type="button" variant="outline" onClick={onCancel}>
              <X className="w-4 h-4 mr-2" />
              取消
            </Button>
            <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
              <Save className="w-4 h-4 mr-2" />
              保存事件
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}
